<template>
  <view class="wrap" :class="'theme-'+theme">
  <view class="addTitle">
      <view class="titleDetail">
        <view class="" style="flex:1;text-align:left">
			<image src="../../static/newh5/fanhui.png"
			class="yticon"
			style="width: 13px;height: 20px;color:black"
			@click="returnIndex()"
			></image>
        </view>
        <view class="titleText" style="flex:1">
          <b>待办事项</b>
        </view>
        <view class=""  style="color: #269cd3;flex:1" > </view>

      </view>
    </view>
   <u-tabs-swiper
    ref="uTabs"
    :active-color="themeColor"
	:active-item-style="activeItemStyle"
    :list="blocklogSwitchList"
    :current="current"
    @change="tabsChange"
    :is-scroll="false"
		swiperWidth="750">
    </u-tabs-swiper>
    <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height:100%">
      <swiper-item>
        <scroll-view scroll-y class="content b-t" @scrolltolower="reachBottom">
          <view class="list b-b" v-for="(item, index) in todoList" :key="index">
            <view class="wrapper">
              <view class="title-box">
                <text class="title">{{item.applyTitle}}</text>
              </view>
              <view class="u-box">
                <text class="createTime">{{item.createTime | datefmt}}</text>
                <!--          <text class="mobile">{{item.createUserName }}</text>-->
              </view>
            </view>
            <view class="bottom" @click="goDetail(item)">
              <view class="btnFrame btn">详情</view>
            </view>
          </view>
          <uni-load-more :status="loadingStatus"></uni-load-more>
        </scroll-view>
      </swiper-item>
      <swiper-item>
         <swiper-item>
          <scroll-view scroll-y class="content b-t" @scrolltolower="reachDoneBottom">
            <view class="list b-b" v-for="(item, index) in doneList" :key="index">
              <view class="wrapper">
                <view class="title-box">
                  <text class="title">{{item.applyTitle}}</text>
                </view>
                <view class="u-box">
                  <text class="createTime">{{item.createTime | datefmt}}</text>
                  <!--          <text class="mobile">{{item.createUserName }}</text>-->
                </view>
              </view>
              <view class="bottom" @click="goDetail(item)">
                <view class="btnFrame btn">详情</view>
              </view>
            </view>
            <uni-load-more :status="doneLoadingStatus"></uni-load-more>
          </scroll-view>
        </swiper-item>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
import {
  getAddressList,
  deleteAddr
} from '../../api/order/order.js'
import { getUndoWork ,getDoneWork, listUndoWork, listDoneWork} from '@/api/backlog/backlog.js'
export default {
  data() {
    return {
      color121:'#00B48D',
      current: 0,
      swiperCurrent: 0,
      blocklogSwitchList:[
        {
          name: '待办事项'
        }, {
          name: '已办事项'
        }
      ],
      // 加载状态 more/loading/noMore
      loadingStatus:'nomore',
      doneLoadingStatus:'nomore',
      page:1,
      donePage:1,
      limit:10,
      todoList:[],
      doneList:[],
      source: 0,
      addrPage: 1,
      addrData: {},
	  activeItemStyle:{}
    }
  },
  onShow(){
    this.todoList = [];
    this.doneList = [];
    this.donePage = 1;
    this.page=1
    this.getData(true)
    // this.switchUndo();
    this.getDoneData(true);
  },
  onLoad(option) {
  },
  onReady() {
  	this.activeItemStyle = {color:this.themeColor}
  },
	onBackPress(e) {
		let pages = getCurrentPages();
		let prePage = pages[pages.length - 2];
		if(prePage.route == 'pages/user/user') {
			uni.reLaunch({
			  url: "/pages/user/user",
			});
		}else {
			uni.reLaunch({
			  url: "/pages/index/index",
			});
		}
		return true
	},
  methods: {

    returnIndex() {
				goback()
			},
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    reachDoneBottom(){
      this.donePage +=1
      if (this.doneLoadingStatus !== 'nomore'){
        this.doneLoadingStatus = 'loading'
        this.getDoneData();
      }
    },
    reachBottom(){
      this.page +=1
      if (this.loadingStatus !== 'nomore'){
        this.loadingStatus = 'loading'
        this.getData()
      }
    },
    tabsChange(index) {
				this.swiperCurrent = index;
		},
    // 切换为已办事项
    switchDone(){
      this.getDoneData();
    },
    // 切换为待办事项
    switchUndo(){
      this.getData();
    },
    goDetail(item) {
      if (item.bizType == 'order' || item.bizType == 'orderMaster') {
          uni.navigateTo({
            url: `/pages/backlog/backlog-detail?applyId=${item.applyId}&procInstId=${item.procInstId}&workitemId=${item.undoId}&actInstId=${item.actInstId}&entityId=${item.bizEntityId}&isDone=${this.current}`          })
        } else if (item.bizType == 'integral') {
          uni.navigateTo({
            url: `/pages/backlog/backlogWalfareDetail?applyId=${item.applyId}&procInstId=${item.procInstId}&workitemId=${item.undoId}&actInstId=${item.actInstId}&entityId=${item.bizEntityId}&isDone=${this.current}`
          })
        }
      },
    // 初始化待办事项列表
    getData(reload = false){
      if(reload){
        this.page = 1
        this.todoList = []
      }
      const params = {
        page: this.page,
        limit: this.limit,
        bizType: ['order', 'integral', 'orderMaster']
      };
      listUndoWork(params).then(res=>{
        if (res.code === 0){
          // res.data.records.forEach(item=>{
          //   this.todoList.push(item)
          // })
          this.todoList = this.todoList.concat(res.data.records);
          if (this.page*this.limit>=res.data.total){
            this.loadingStatus = 'nomore'
          }else {
            this.loadingStatus = 'more'
          }
        }else {
          this.toast(res.message)
        }
      })
    },
    // 获取已办事件
    getDoneData(reload = false){
      if(reload){
        this.donePage = 1
        this.doneList = []
      }
      const params = {
        page: this.donePage,
        limit: this.limit,
        bizType: ['order', 'integral', 'orderMaster']
      };
      listDoneWork(params).then(res=>{
        if (res.code === 0){
          // res.data.records.forEach(item=>{
          //   this.doneList.push(item)
          // })
          this.doneList = this.doneList.concat(res.data.records);
          if (this.donePage*this.limit>=res.data.total){
            this.doneLoadingStatus = 'nomore'
          }else {
            this.doneLoadingStatus = 'more'
          }
        } else {
          this.toast(res.message);
        }
      })
    },
    toast(msg) {
      uni.showToast({
        title: msg,
        duration: 1200,
        mask: false,
        icon: 'none'
      });
    }
  }
}
</script>

<style lang='scss'>
page {
	height: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
wrap {
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--window-top));
  width: 100%;
}
.select-container{
  display: flex;
  padding-top: 4px;
  padding-bottom: 4px;
  border-top: 1px solid #E4E7ED;
  .option{
    width: 50%;
    text-align: center;
  }
  .active{
    color: orange;
  }
}
.bottom {
  display: flex;
  margin-top: 40rpx;
  padding: 0 10rpx;
  justify-content: flex-end;
  align-items: center;
  .btn {
    line-height: 52rpx;
    width: 160rpx;
    border-radius: 26rpx;
    border: 2rpx solid #e4e7ed;
    font-size: 26rpx;
    text-align: center;
    color: #82848a;
  }
  .evaluate {
    color: #f9436a;
    border-color: #f9436a;
  }
}
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--window-top));
  width: 100%;
}
.content {
  position: relative;
  height: 100%;
  width: 100%;
}
.detail{
  font-size: 34upx;
  color: $uni-color-primary;
  margin: 0 10upx 0 30upx;
}
.list {
  display: flex;
  align-items: center;
  padding: 20upx 30upx;
;
  background: #fff;
  position: relative;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  .uni-swiper{
    height: 100%;
  }
}

.delete {
  width: 40upx;
  height: 40upx;
  margin-left: 16upx;
}

.title-box {
  display: flex;
  align-items: center;

  .title {
    font-size: 30upx;
    color: $font-color-dark;
  }
}

.u-box {
  font-size: 28upx;
  color: $font-color-light;
  margin-top: 16upx;

  .createTime {
    margin-right: 30upx;
  }
}

.icon-bianji {
  display: flex;
  align-items: center;
  height: 80upx;
  font-size: 40upx;
  color: $font-color-light;
  padding-left: 30upx;
}
</style>
